<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div class="imgBlock">
    <div class="pic"><img :src="picUrl" alt="" /></div>
    <div class="desc">
      <p>{{ title }}</p>
      <span>
        {{ desc }}
      </span>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    //图片标题
    title: {
      type: String,
      default: "图片标题图片标题图片标题",
    },
    //图片摘要
    desc: {
      type: String,
      default:
        "图片详情描述图片详情描述图片详情描述图片详情描述图片详情描述图片详情描述",
    },
    //图片路径
    picUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>


<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='less' scoped>
.imgBlock {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  .desc {
    width: 100%;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
      font-size: 14px;
    }
    span {
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      font-size: 12px;
    }
  }
}
</style>